<template>
  <div style="padding-bottom: 44px">
    <ul class="news-card-list">
      <li class="news-card" v-for="(card, index) in xinwenzixun" :key="index">
        <elImage
          :src="card.logoimage"
          fit="cover"
          class="news-card-img"
        ></elImage>
        <div class="news-title">{{ card.title }}</div>
        <!--<div class="news-tag-list">
					<div class="news-tag" v-for="(tag, index) in tags" :key="index">{{ (tag = '') }}</div>
				</div>-->
        <div class="news-times">
          {{ card.description }}
          <span></span>
          {{ card.publishtime | format('YYYY.M')}}
        </div>
      </li>
    </ul>
    <div style="text-align: center">
      <Pagination background layout="prev, pager, next" :page-size='6' :total="total" @current-change="currentChange">
      </Pagination>
    </div>
  </div>
</template>
<script>
import { Image, Pagination } from "element-ui";
import { xinwenzixun } from "../../api/cms.js";

export default {
  components: {
    elImage: Image,
    Pagination,
  },
  data() {
    return {
      active: 0,
      xinwenzixun: [],
      total: 0
    };
  },
  created() {
    //请求信息
    this.getList(1)
  },
  methods: {
    getList (page) {
      xinwenzixun({
        page,
        limit: 6
      })
        .then((res) => {
          this.xinwenzixun = res.data.data.rows;
          this.total = res.data.data.total
        })
        .catch((res) => {
          console.log(res);
        });
    },
    currentChange (index) {
      this.getList(index)
    }
  },
};
</script>
<style scoped>
.news-card {
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  box-shadow: 2.5px 4.33px 7px 0px rgb(0, 0, 0, 0.2);
  width: 392px;
  height: 426px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}
.news-card-img {
  width: 100%;
  height: 238px;
}
.news-title {
  font-size: 18px;
  color: #2b2e2e;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 20px 34px;
  line-height: 30px;
  margin-top: -4px;
}
.news-card-list {
  width: 1228px;
  margin: 50px auto 0;
}
.news-tag-list {
  padding: 0 34px;
}
.news-tag {
  font-size: 13px;
  color: #3d80ff;
  height: 26px;
  padding: 0 14px;
  background: #ebf5ff;
  display: inline-block;
  line-height: 26px;
  margin-right: 12px;
}
.news-times {
  position: absolute;
  bottom: 20px;
  left: 0px;
  padding: 0 34px;
  display: flex;
  width: 100%;
  font-size: 12px;
  color: #828282;
}
.news-card:nth-child(3n-1) {
  margin-left: 26px;
  margin-right: 26px;
}
.news-times span {
  flex: 1;
}
</style>
